<template>
  <div class="error-page">
    <!-- 背景装饰 -->
    <div class="decorations">
      <div class="decoration-circle circle-1"></div>
      <div class="decoration-circle circle-2"></div>
      <div class="decoration-circle circle-3"></div>
    </div>

    <el-container class="page-container">
      <el-main class="main-content">
        <!-- 错误内容卡片 -->
        <el-card class="error-card" shadow="hover">
          <!-- 动态错误图标 -->
         <div style="display:flex; align-items: center;justify-content: center">
           <div class="error-icon">
             <component :is="errorIcon" class="icon" />
           </div>

           <!-- 错误标题 -->
           <h1 class="error-title">
             {{ errorTitle }}
           </h1>
         </div>

          <!-- 错误描述 -->
          <p class="error-description">
            {{ errorDescription }}
          </p>

          <!-- 操作按钮 -->
          <div class="action-buttons">
            <el-button
                type="primary"
                size="large"
                @click="goHome"
                class="action-btn"
            >
              <el-icon><HomeFilled /></el-icon>
              返回首页
            </el-button>

            <el-button
                size="large"
                @click="goBack"
                class="action-btn"
            >
              <el-icon><ArrowLeft /></el-icon>
              返回上一页
            </el-button>


          </div>


        </el-card>
      </el-main>


    </el-container>
  </div>
</template>

<script setup>
import {computed } from 'vue'
import { useRouter } from 'vue-router'
import {ArrowLeft, CloseBold, HomeFilled, Search, WarningFilled} from "@element-plus/icons-vue";


const props = defineProps({
  errorType: {
    type: String,
    default: '404' // '404', '500', '403', 'offline'
  },
  errorMessage: {
    type: String,
    default: ''
  }
})

const router = useRouter()

// 根据错误类型显示不同的内容
const errorConfig = computed(() => {
  const configs = {
    '404': {
      icon: Search,
      title: '页面未找到',
      description: '抱歉，您访问的页面不存在或已被移除。',

    },
    '500': {
      icon: CloseBold,
      title: '服务器错误',
      description: '服务器遇到错误，无法完成您的请求。',

    },
    '403': {
      icon: WarningFilled,
      title: '访问被拒绝',
      description: '您没有权限访问此页面。',

    },
    'offline': {
      icon: WarningFilled,
      title: '网络连接失败',
      description: '请检查您的网络连接，然后重试。',

    }
  }

  return configs[props.errorType] || configs['500']
})

const errorIcon = computed(() => errorConfig.value.icon)
const errorTitle = computed(() => errorConfig.value.title)
const errorDescription = computed(() => props.errorMessage || errorConfig.value.description)


// 操作方法
const goHome = () => {
  router.push('/')
}

const goBack = () => {
  router.back()
}


</script>

<style scoped lang="scss">
.error-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #3C537D 0%, #788fc8 100%);
  position: relative;
  overflow: hidden;

  .decorations {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;

    .decoration-circle {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      animation: float 6s ease-in-out infinite;
    }

    .circle-1 {
      width: 300px;
      height: 300px;
      top: -150px;
      right: -150px;
      animation-delay: 0s;
    }

    .circle-2 {
      width: 200px;
      height: 200px;
      bottom: 50px;
      left: -100px;
      animation-delay: 2s;
    }

    .circle-3 {
      width: 150px;
      height: 150px;
      top: 50%;
      right: 20%;
      animation-delay: 4s;
    }
  }
}

.page-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 2rem;
}

.error-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: 20px;
  padding: 2rem;
  text-align: center;

  :deep(.el-card__body) {
    padding: 2rem;
  }
}

.error-icon {
  .icon {
    width: 60px;
    height: 60px;
    color: #3C537D;
    filter: drop-shadow(0 4px 12px rgba(102, 126, 234, 0.3));
    margin-right: 12px;
  }
}

.error-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2d3748;
  background: linear-gradient(135deg, #3C537D 0%, #788fc8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.error-description {
  font-size: 1.1rem;
  color: #718096;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.error-code {
  margin-bottom: 2rem;
}

.action-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;

  .action-btn {
    border-radius: 25px;
    padding: 12px 24px;
    font-weight: 500;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
  }
}

.support-section {
  margin-top: 2rem;

  .support-text {
    color: #a0aec0;
    margin-bottom: 1rem;
  }
}

.page-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);

  .footer-text {
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    font-size: 0.9rem;
  }
}

// 动画
@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .main-content {
    padding: 1rem;
  }

  .error-card {
    padding: 1.5rem;

    :deep(.el-card__body) {
      padding: 1.5rem;
    }
  }

  .error-title {
    font-size: 2rem;
  }

  .error-icon .icon {
    width: 80px;
    height: 80px;
  }

  .action-buttons {
    flex-direction: column;
    align-items: center;

    .action-btn {
      width: 100%;
      max-width: 250px;
    }
  }
}

@media (max-width: 480px) {
  .error-title {
    font-size: 1.75rem;
  }

  .error-description {
    font-size: 1rem;
  }
}
</style>
